*{
    font-family: PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica
    ,Arial,PingFangSC-Regular,"Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB"
    ,"Microsoft YaHei","微软雅黑",Arial,sans-serif,
    PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,
    "微软雅黑", "宋体", "Helvetica Neue", Arial, Helvetica, sans-serif;

}
body {
    /* font-family: PingFangSC-Regular,"Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif; */
    font-family: PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica
    ,Arial,PingFangSC-Regular,"Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB"
    ,"Microsoft YaHei","微软雅黑",Arial,sans-serif,
    PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial;
    margin: 0;
    text-decoration: none;
    padding: 0;
    color: #333;
    background: #fff;

}
h3{line-height: 30px;font-size: 24px;color: #333333;font-weight: normal;margin-top: 0px;}
a{text-decoration: none;color: #333333;}
li{ list-style: none;}
img{transition: all 1s;cursor: pointer;}
img:hover{   filter:alpha(opacity=60); -moz-opacity: 0.6;opacity: 0.6; }
a:hover{color:#3498db;text-decoration: none;}
/*头部导航栏*/
.homeheader{height:  64px; width:100%; background: #202020; color: white; margin: 0;padding: 0;}

.homeheader .centre{height: 100%;width: 80%;margin: 0 auto;}

.homeheader .centre .left{height:100%;float: left;}
.homeheader .centre .left img{height:100%;}

.homeheader .centre .homeheader_centre{height: 100%; width: 60%;float: left;display: flex;justify-content: space-evenly;}
.homeheader .centre .homeheader_centre li{height:100%; line-height: 64px; font-size: 0.9rem; color: #FFFFFF;}
.homeheader .centre .homeheader_centre li a{color: #FFFFFF; font-size: 1.5rem;}
.homeheader .centre .homeheader_centre li a:hover{color: #3498db;}

.homeheader .centre .right{float: left;height: 100%;display: flex;flex-direction: column;justify-content: center;}
.homeheader .centre .right input{height: 14px;width: 148px;font-size: 14px; padding: 10px 58px 10px 16px;background: #fff;outline-style: none;outline-width: 0;border-radius: 16px;border: none;margin-top: calc(64px - 38px - 9px);color: #666666;}
.homeheader .centre .right .searchBtn{display:block;position: relative;right: -190px;top: -22px;width: 20px;height: 30px;z-index:3;background: url() no-repeat center center;background-size: cover;}

.homeheader .centre .right-img{height: 100%; float: right;display: flex;flex-direction: column;justify-content: center;}
.homeheader .centre .right-img img{height: 50px;width: 50px; border-radius: 50%;}

/*肚子*/
article{width: 80%; margin: 0 auto;border-radius: 6px;border: 1px solid #e5e5e5;}
.all{width: 95%;margin: 0 auto;}
/*第一大行*/
.article-1{height: 380px;padding-bottom:50px;padding-top: 50px;clear: both;}
/*左边*/
.article-1 .article-1-left{width:30%;height:100%;float: left;}
.article-1 .article-1-left img{width:100%;height:100%;object-fit: cover;border-radius: 5%;box-shadow: 3px 3px 4px #999;}
/*右边*/
.article-1 .article-1-right{width:60%;height:100%;float: left;padding-left: 20px;}
.article-1 .article-1-right .author{padding-bottom: 0px;margin-bottom: 0px; font-size: 13px;}
.article-1 .article-1-right .else{width: 100%;color: #999;font-size: 13px;}
.article-1 .article-1-right .else span{margin-right: 30px;}
.article-1 .article-1-right .newest{padding-bottom: 0px;margin-bottom: 0px; font-size: 13px;}
.article-1 .article-1-right .introduce{font-size: 13px;color: #999;overflow: hidden;width: 100%;height: 90px;overflow: scroll;}/*display: block;*/

/*第二大行*/
.article-1-right .option-but{width: 100%;height: 20px;}

.switchover{width: 100%;height: 50px;}
.switchover div{width: 20%;height: 40px;float: right;background: #d575ff;border-radius: 50px;background: #F7F9FA;}
.switchover div .switchover-left{float: left;width: 48%;height: 40px;text-align: center;line-height: 40px;border-radius: 50px;cursor: pointer;margin-left: 2%;}
.switchover div .switchover-left:hover{color: #0d8ddb;}
.switchover div .switchover-right{float: left;width: 48%;height: 40px;text-align: center;line-height: 40px;border-radius: 50px;cursor: pointer;background: #ffffff;}
.switchover div .switchover-right:hover{color: #0d8ddb;}

.article-2-1{display: flex;justify-content: space-between;flex-wrap: wrap;}
.article-2-1 div{width: 15%;height: 40px;text-align: left;line-height: 40px;display: block;margin-top: 5px;color: #0d8ddb;}
.article-2-1 div a{width: 100%;height: 100%;display: block;text-decoration: none;color: #666666;border-bottom: 1px solid #f3f3f3;}
.article-2-1 div a:hover{color: #0d8ddb;border-bottom: 1px solid #0d8ddb;}
/*评论*/
.comment-box{width: 100%;clear: both;}
.article-2-2-comment{width: 100%;clear: both;}
.article-2-2-right-article-2-2-comment{width: 100%;clear: both; display: none;}
.article-2-2-comment .col-sm-12 .form-control,.article-2-2-right-article-2-2-comment .col-sm-12 .form-control{resize: none;width: 100%;height: 140px;}
.article-2-2-comment-cilcka{ position: relative;top: -35px;width: 100%;}

.comment_click{width: 100%;height: 30px;clear: both; text-align: center;line-height: 30px;  font-size: 1em;color: #999;cursor: pointer;}


.article-2-2{width: 100%;border-top: 1px solid #e5e5e5;clear: both;padding-top: 20px;}
.none-last{display: none;}
.article-2-2 .article-2-2-left{height: 100%;width: 70px;float: left;}
.article-2-2 .article-2-2-left img{height: 50px;width: 50px;border-radius: 50%;}

.article-2-2 .article-2-2-right{height: 100%;width: calc(100% - 70px);float: left;}
.article-2-2 .article-2-2-right .article-2-2-right-name{font-size: 13px;color: #0d8ddb;float: left;margin-right: 10px;}
.article-2-2 .article-2-2-right .article-2-2-right-time{font-size: 13px; float: left;color: #999;}
.article-2-2 .article-2-2-right .article-2-2-right-text{font-size: 13px;color: #999;clear: both;}
.article-2-2 .article-2-2-right .article-2-2-right-give{font-size: 13px;color: #999;float: right;}
.article-2-2-right-reply{cursor: pointer;font-size: 13px;color: #0d8ddb;}
.article-2-2-right-strip{cursor: pointer;font-size: 13px;color: #0d8ddb;}


/*第三大行*/
.article-3{}


.articl-1-2{width: 100%;padding: 0; margin-top: 30px;display: flex;justify-content: space-between;flex-wrap:wrap;}
.articl-1-2 .articl-1-2-box{height: 289px;width: 15%;margin-top: 5px;}
.articl-1-2 .articl-1-2-box a img{height: 270px;width: 100%;border-radius: 5px; transition: all 1s; object-fit: cover;vertical-align: middle;}
.articl-1-2 .articl-1-2-box a img:hover{   filter:alpha(opacity=60); -moz-opacity: 0.6;opacity: 0.6; }
.articl-1-2 .articl-1-2-box a div{height: 20px;width: 100%; position:relative;color: white;margin: 0;top: 2px;border-bottom-left-radius: 5px;border-bottom-right-radius: 5px;}
.articl-1-2 .articl-1-2-box a div span{font-size: 0.5em;}
.articl-1-2 .articl-1-2-box a div span:hover{color:#3498db;}
.articl-1-2 .articl-1-2-box a {text-decoration: none;}
.articl-1-2 .articl-1-2-box a div .articl-1-2-box-left{float: left; width: 100%; background: rgba(0,0,0,0.5);}

.articl-1-2 .articl-1-2-box a span{position:relative;top: -19px;}
.articl-1-2 .articl-1-2-box a span:hover{color:#3498db;}


/*底部*/
footer{text-align: center;color: white;font-size: 1em;height: 200px;width: 100%;background: #282828;"微软雅黑", "宋体", "Helvetica Neue", Arial, Helvetica, sans-serif;font: 12px/180% Arial, Helvetica, sans-serif, "新宋体";margin-top: 70px;}


/*提示*/
#null-Warning{height: 100px;width: 100%;text-align: center; border: none; font-size:1em; color: #999999;clear: both;line-height: 100px;}
#null-Warning div{height: 20px;width: 100%;text-align: center; font-size:1em; color: #666666;cursor: pointer;}
#null-Warning div:hover{color: #0d8ddb;}

/* 定义滚动条样式 */

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    display: none;
    background-color: rgba(240, 240, 240, 1);

}


/*定义滚动条轨道 内阴影+圆角*/

::-webkit-scrollbar-track {

    box-shadow: inset 0 0 0px rgba(240, 240, 240, .5);

    border-radius: 10px;

    background-color: rgba(240, 240, 240, .5);

}



/*定义滑块 内阴影+圆角*/

::-webkit-scrollbar-thumb {

    border-radius: 10px;

    box-shadow: inset 0 0 0px rgba(240, 240, 240, .5);

    background-color: rgba(240, 240, 240, .5);

}

/*响应式*/
@media screen and (max-width: 1100px) {
    .homeheader .centre{width: 100%;}
    .article-1{width: 100%;}
    article{width: 100%;}
}

@media screen and (max-width:900px){
    .homeheader .centre .left{display: none;}
    .homeheader .centre .right-img{display: none;}
    .homeheader .centre{width: 80%;}
    .articl-1-2 .articl-1-2-box a img{ max-width: 100%;max-height: 100%;}
    .article-1 .right{width: 90%;}
    #article-article-1{display: none;}

}
@media screen and (max-width: 800px) {
    .homeheader .centre .homeheader_centre{display: none;}
    .homeheader .centre{width: 100%;}
    .homeheader .centre .right{width:225px;margin: 0 auto;float:none;}
    .article-1{width: 100%;}
}
@media screen and (max-width: 700px) {
    .article-1 .left{float: none;margin: 0 auto;}
    .article-1 .right{width:100%;padding:0px;margin: 0 auto;float: none; }
    .articl-1-2 .articl-1-2-box{width: 33%;margin-top: 5px;height: 209px;}
    .articl-1-2 .articl-1-2-box a img{height: 190px;}
    .article-1{margin-top: 5px;}
    .articl-1-2{margin-top: 10px;}
    .article-1 ul li a {padding-top: 2px;padding-bottom: 2px;padding-left: 5px;padding-right: 5px;font-size: 0.7rem;width: 14%; text-align: center;margin-bottom: 5px;}
    .homeheader{height: 40px;}
    .homeheader .centre .right input{height: 10px; margin-bottom: 16px;}
    .article-1{padding: 0px;height: 550px;}
    .article-1 .article-1-left{width: 100%;height: 250px;padding: 10px;}
    .article-1 .article-1-right{width: 100%;height: 250px;margin-top: 10px;}
    .article-2-1 div{width: 100%;text-align: left;}
    .switchover div{width: 50%;}
}